import React from 'react';
import FlipMove from 'react-flip-move'
import Button from '../../components/Button'

import 'bootstrap/dist/css/bootstrap.min.css';
import './style.scss';


class App extends React.Component {

    constructor(props) {
        super(props);

        this.state = {
            items: [
                {id: 1, name: "aaaaaa"},
                {id: 2, name: "bbbbbb"},
                {id: 3, name: "cccccc"},
                {id: 4, name: "dddddd"},
                {id: 5, name: "eeeeee"},
                {id: 6, name: "ffffff"},
            ]
        }
    }

    render() {
        let items = this.state.items;
        return (
            <div className="items-panel">
                {/* <Button type="primary" size="big">你好</Button>
        <Button type="primary">你好</Button>
        <Button>你好</Button> */}
                <ul>
                    <FlipMove>
                        {
                            items.map((item, index) => (
                                <li key={item.id} className="list-group-item">
                                    <div className="name">{item.name}</div>
                                    <div className="btn-group">
                                        {
                                            index > 0 ?
                                                <Button type="primary"
                                                        onClick={() => this.sortUp(index)}>Up</Button> : null
                                        }
                                        {
                                            index < items.length - 1 ?
                                                <Button type="dark"
                                                        onClick={() => this.sortDown(index)}>Down</Button> : null
                                        }
                                    </div>
                                </li>
                            ))
                        }
                    </FlipMove>
                </ul>
            </div>
        );
    }


    sortUp(index) {
        this.resort(index, -1);
    }

    sortDown(index) {
        this.resort(index, 1);
    }

    resort(index, diff) {
        let items = this.state.items;
        let item = items[index];
        items.splice(index, 1);
        items.splice(index + diff, 0, item);
        this.setState({items: items})
    }

}


export default App;